<!--
 * @Author: 康某 carl0608@126.com
 * @Date: 2022-12-28 22:43:45
 * @LastEditors: 康浩 hao.kang02@geely.com
 * @LastEditTime: 2022-12-29 14:34:18
 * @FilePath: \vue3-template\src\views\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
 <div class="login_box">
  <div class="login_content">
   <el-form :model="form" class="login-form" :rules="rules">
    <el-form-item label="" class="form-item">
     <el-input
      size="large"
      class="login-form-item"
      v-model="form.name"
     ></el-input>
    </el-form-item>
    <el-form-item class="form-item">
     <el-input
      size="large"
      class="login-form-item"
      type="password"
      show-password
      v-model="form.keyword"
     ></el-input>
    </el-form-item>
    <el-form-item class="form-item">
     <el-button class="login_btn" @click="login">登录</el-button>
    </el-form-item>
   </el-form>
  </div>
 </div>
</template>

<script lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
export default {
 name: "LoginPage",
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 setup() {
  const router = useRouter();
  const form = reactive({
   name: "",
   keyword: "",
  });
  const login = () => {
   console.log(router);
   if (form.name === "admin" && form.keyword === "admin") {
    router.push("/");
   }
  };
  return {
   form,
   login,
  };
 },
};
</script>

<style lang="less" scoped>
@keyframes clipMe {
 0%,
 100% {
  clip: rect(0px, 500px, 2px, 0px);
 }
 25% {
  clip: rect(0px, 2px, 300px, 0px);
 }
 50% {
  clip: rect(299px, 500px, 300px, 0px);
 }
 75% {
  clip: rect(0px, 500px, 300px, 499px);
 }
}
.login_box::after {
 position: absolute;
 top: 0;
 left: 0;
 background: inherit;
 // background-size: 100%;
 filter: blur(8px);
 z-index: 1;
}
.login_box {
 // background: #555;
 // animation-delay: 1s;
 width: 100vw;
 height: 100vh;
 display: flex;
 justify-content: space-around;
 align-items: center;
 position: relative;
 background: url("/src/assets/img/login_bg1.jpg") no-repeat fixed;
 background-size: 100%;
 .login_content {
  text-align: center;
  background: inherit;
  // mix-blend-mode: lighten;
  // filter: blur(0px);
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 50%);
  border-radius: 8px;
  width: 500px;
  height: 300px;
  // padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 99;
  .login-form {
   width: 100%;
   .form-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    ::v-deep .el-form-item__content {
     width: 60%;
     justify-content: center;
    }
   }
  }
  .login_btn {
   width: 100%;
   background: transparent;
   height: 32px;
   line-height: 32px;
   color: rgba(234, 241, 203, 0.8);
   border: 1px solid rgba(234, 241, 203, 0.8);
  }
 }
 // .login_content::before,
 // .login_content::after {
 // }

 .login_content::before,
 .login_content::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  z-index: 99;
  // margin: -5%;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(234, 241, 203, 0.8);
  animation: clipMe 8s linear infinite;
 }
 .login_content::before {
  animation-delay: -4s;
 }
 .login-form-item {
  height: 32px;
  line-height: 32px;
  background: transparent !important;
  border: none;
  border-bottom: 1px solid rgba(234, 241, 203, 0.8);
  border-radius: 0%;
  color: rgba(234, 241, 203, 0.8) !important;
 }
}
::v-deep .el-input__wrapper {
 display: flex;
}
::v-deep .el-input__suffix {
 width: 16px;
}
::v-deep .el-input__inner {
 color: rgba(234, 241, 203, 0.8);
 width: 100%;
 height: 32px;
 line-height: 32px;
 background: transparent !important;
}
::v-deep .el-input__inner .is-focus {
 border: none;
 box-shadow: none;
}
::v-deep input {
 outline: 0px;
 box-shadow: none !important;
 border: none;
 //  border-bottom: 1px solid rgba(234, 241, 203, 0.8) !important;
}
::v-deep input:focus {
 box-shadow: none;
}
input:-webkit-autofill {
 background: transparent;
}
</style>
